<template>
  <div style="margin-top: 50px">
    <el-form :model="form" ref="productRelationForm" label-width="120px" class="form-inner-container" size="small">
      <el-form-item label="关联专题：">
        <el-transfer
          style="display: inline-block"
          filterable
          :filter-method="filterMethod1"
          filter-placeholder="请输入专题名称"
          v-model="selectSubject"
          :props="{ key: 'id', label: 'title' }"
          :titles="subjectTitles"
          :data="subjectList"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item label="关联优选：">
        <el-transfer
          style="display: inline-block"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入优选名称"
          v-model="selectPrefrenceArea"
          :titles="prefrenceAreaTitles"
          :props="{ key: 'id', label: 'name' }"
          :data="prefrenceAreas"
        >
        </el-transfer>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="small" @click="handlePrev">上一步</el-button>
        <el-button type="primary" size="small" @click="handleFinishCommit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineOptions } from 'vue'
import { useRoute } from 'vue-router'
import { fetchListAll as fetchSubjectList } from '@/api/subject'
import { prefrenceAreaList } from '@/api/prefrenceArea'
import type { PrefrenceArea } from '@/models/prefrenceArea'
import type { Subject } from '@/models/subject'
defineOptions({ name: 'ProductRelationDetail' })
const emit = defineEmits(['prevStep', 'finishCommit', 'update:modelValue'])
const route = useRoute()
const props = defineProps({
  modelValue: {
    type: Object,
    default: null,
  },
})
const prefrenceAreaTitles = ['待选择', '已选择']
const subjectTitles = ['待选择', '已选择']
const subjectList = ref<Subject[]>([])
const prefrenceAreas = ref<PrefrenceArea[]>([])

const form = computed({
  get: () => props.modelValue,
  set(value) {
    emit('update:modelValue', value)
  },
})

const selectSubject = computed({
  get: () => form.value.subjectProductRelationList?.map((item: any) => item.subjectId) || [],
  set: function (newValue) {
    form.value.subjectProductRelationList = newValue?.map((item: any) => ({ subjectId: item })) || []
  },
})
const selectPrefrenceArea = computed({
  get: () => form.value.prefrenceAreaProductRelationList?.map((item: any) => item.prefrenceAreaId) || [],
  set: function (newValue) {
    form.value.prefrenceAreaProductRelationList = newValue?.map((item: any) => ({ prefrenceAreaId: item })) || []
  },
})

const filterMethod = (query: string, item: Record<string, any>) => item.name.includes(query)
const filterMethod1 = (query: string, item: Record<string, any>) => item.title.includes(query)
async function getSubjectList() {
  const response = await fetchSubjectList()
  subjectList.value = response.data.data
}
async function getPrefrenceAreaList() {
  const response = await prefrenceAreaList()
  prefrenceAreas.value = response.data.data
}
function handlePrev() {
  emit('prevStep')
}
function handleFinishCommit() {
  emit('finishCommit', route.query.id)
}

getSubjectList()
getPrefrenceAreaList()
</script>

<style scoped></style>
